<template>
  <t-drawer v-model:visible="drawerVisible" size="large">
    <t-descriptions title="线索详情">
      <t-descriptions-item label="Name" :content="projectDetail.projectName">TDesign</t-descriptions-item>
      <t-descriptions-item label="Telephone Number">139****0609</t-descriptions-item>
      <t-descriptions-item label="Area">China Tencent Headquarters</t-descriptions-item>
      <t-descriptions-item label="Address">Shenzhen Penguin Island D1 4A Mail Center</t-descriptions-item>
    </t-descriptions>
  </t-drawer>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';

const drawerVisible = ref(false);
const projectDetail: any = ref({});

const emit = defineEmits(['update:visible']);

const props = defineProps<{
  visible: boolean;
  data: {};
}>();

watch(
  () => drawerVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    drawerVisible.value = val;
  },
);

watch(
  () => props.data,
  (val) => {
    projectDetail.value = val;
  },
);
</script>
